import React from 'react'
import { NavBar, Button } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import styles from './css/zf.module.css'
import http from '../../api/http'
import dayjs from 'dayjs'

const Zf = () => {
    const nav = useNavigate()
    const { state } = useLocation()
    const date = dayjs().format("YYYY-MM-DD")

   // 支付
    const zf=async()=>{
        const id=6;
        const title="火车票";
        const price=800;
        const res=await http.get("/api/pay",{params:{id,title,price}})
        const {data}=res.data
        window.location.href=data
    }
    
    return (
        <div>
             {/* 返回上一页 */}
            <NavBar onBack={() => nav(-1)}>订单支付</NavBar>
            <div>
                <dl className={styles.dl}>
                    <dt>
                        <div>{state.start}—{state.end}</div>
                        <div>{date}</div>
                    </dt>
                    <dd>
                        <div>{state.startTime}</div>
                        <div>时刻表</div>
                    </dd>
                    <dd>
                        <div>二等座:{state.tick.secondTick}</div>
                        <div>一等座:{state.tick.firstTick}</div>
                        <div>商务座:{state.tick.vip}</div>
                    </dd>
                </dl>
            </div>
            <Button block color='primary' size='large' onClick={()=>zf()}>
                支付
            </Button>
        </div>
    )
}

export default Zf
